<template>
  <div class="user-ban-container">
    <el-card class="ban-card">
      <div slot="header" class="clearfix">
        <span>用户禁言管理</span>
      </div>

      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="关键词">
            <el-input 
              v-model="searchForm.keyword" 
              placeholder="请输入userid/openid/昵称/手机号"
              clearable
              @clear="handleReset"
            />
          </el-form-item>
          
          <el-form-item label="状态">
            <el-select v-model="searchForm.state" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 用户列表区域 -->
      <div class="user-list-section">
        <h3>用户列表 (总数: {{ total }})</h3>
        
        <!-- 使用 v-for 直接渲染用户数据，避免 slot-scope 问题 -->
        <div v-if="!tableLoading && userList.length > 0" class="user-table-container">
          <!-- 表格头部 -->
          <div class="table-header">
            <div class="header-cell" style="width: 200px;">用户ID</div>
            <div class="header-cell" style="width: 260px;">用户账号</div>
            <div class="header-cell" style="width: 280px;">昵称</div>
            <div class="header-cell" style="width: 200px;">性别</div>
            <div class="header-cell" style="width: 280px;">手机号</div>
            <div class="header-cell" style="width: 220px;">会员等级</div>
            <div class="header-cell" style="width: 220px;">注册来源</div>
            <div class="header-cell" style="width: 200px;">状态</div>
            <div class="header-cell" style="width: 200px;">黑名单</div>
            <div class="header-cell" style="width: 200px;">操作</div>
          </div>
          
          <!-- 表格内容 -->
          <div class="table-body">
            <div 
              v-for="(user, index) in userList" 
              :key="user.buyerUserId || index"
              class="table-row"
              :class="{ 'row-even': index % 2 === 0, 'row-odd': index % 2 === 1 }"
            >
              <!-- 用户ID -->
              <div class="table-cell" style="width: 180px;">{{ user.buyerUserId || '--' }}</div>
              
              <!-- 用户账号 -->
              <div class="table-cell" style="width: 240px;">
                {{ user.account || user.phone || user.name || '未设置' }}
              </div>
              
              <!-- 昵称 -->
              <div class="table-cell" style="width: 260px;">{{ user.name || '--' }}</div>
              
              <!-- 性别 -->
              <div class="table-cell" style="width: 180px;">{{ getSexText(user.sex) }}</div>
              
              <!-- 手机号 -->
              <div class="table-cell" style="width: 260px;">{{ user.phone || '未设置' }}</div>
              
              <!-- 会员等级 -->
              <div class="table-cell" style="width: 200px;">{{ user.memberLevelName || '普通用户' }}</div>
              
              <!-- 注册来源 -->
              <div class="table-cell" style="width: 200px;">{{ getTerminalText(user.terminal) }}</div>
              
              <!-- 状态 -->
              <div class="table-cell" style="width: 200px;">
                <el-tag :type="user.state === 1 ? 'success' : 'danger'">
                  {{ user.state === 1 ? '启用' : '禁用' }}
                </el-tag>
              </div>
              
              <!-- 黑名单 -->
              <div class="table-cell" style="width: 140px;">
                <el-tag :type="user.ifBlack === 1 ? 'danger' : 'info'">
                  {{ user.ifBlack === 1 ? '是' : '否' }}
                </el-tag>
              </div>
              
         <!-- 操作 -->
<div class="table-cell" style="width: 200px;">
  <div class="operation-buttons">
    <!-- 禁言按钮 -->
    <el-button
      size="small"
      type="danger"
      @click="handleBanClick(user)"
      :disabled="!user || !user.buyerUserId"
      v-if="user && user.buyerUserId"
    >
      禁言
    </el-button>

    <!-- 解除禁言按钮 -->
    <el-button
      size="small"
      type="warning"
      @click="handleUnbanClick(user)"
      :disabled="!user || !user.buyerUserId"
      v-if="user && user.buyerUserId"
    >
      解除禁言
    </el-button>
  </div>
</div>
            </div>
          </div>
        </div>

        <!-- 空数据状态 -->
        <div v-if="!tableLoading && userList.length === 0" class="empty-state">
          <el-empty 
            description="暂无用户数据" 
            :image-size="120"
          >
            <el-button type="primary" @click="loadUserList">重新加载</el-button>
          </el-empty>
        </div>

        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination-wrapper"
        ></el-pagination>
      </div>

      <!-- 禁言对话框 -->
<el-dialog v-model="banDialogVisible" title="设置禁言" width="500px" class="ban-dialog">
        <div v-if="banTargetUser">
          <div class="user-info">
            <strong>目标用户：</strong>ID {{ banTargetUser.buyerUserId }}
            <span v-if="banTargetUser.userAccount || banTargetUser.phone || banTargetUser.name">
              （{{ banTargetUser.userAccount || banTargetUser.phone || banTargetUser.name }}）
            </span>
          </div>
          <el-form :model="banDialogForm" label-width="120px" :rules="banFormRules" ref="banForm">
            <el-form-item label="禁言账号" prop="account">
              <el-input 
                v-model="banDialogForm.account" 
                placeholder="请输入用户账号"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="私聊禁言时长" prop="c2CmsgNospeakingTime">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-input-number 
                    v-model="banDialogForm.durationValue" 
                    :min="1" 
                    :max="999999"
                    controls-position="right" 
                    style="width:100%" 
                  />
                </el-col>
                <el-col :span="10">
                  <el-select v-model="banDialogForm.durationUnit" style="width:100%">
                    <el-option label="分钟" value="minute" />
                    <el-option label="小时" value="hour" />
                    <el-option label="天" value="day" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="群聊禁言时长" prop="groupmsgNospeakingTime">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-input-number 
                    v-model="banDialogForm.groupDurationValue" 
                    :min="1" 
                    :max="999999"
                    controls-position="right" 
                    style="width:100%" 
                  />
                </el-col>
                <el-col :span="10">
                  <el-select v-model="banDialogForm.groupDurationUnit" style="width:100%">
                    <el-option label="分钟" value="minute" />
                    <el-option label="小时" value="hour" />
                    <el-option label="天" value="day" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="禁言原因">
              <el-input 
                type="textarea" 
                :rows="3" 
                v-model="banDialogForm.reason" 
                placeholder="请输入禁言原因（可选）" 
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="banDialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="confirmBan">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 解除禁言对话框 -->
    <el-dialog v-model="unbanDialogVisible" title="设置禁言" width="500px" class="ban-dialog">
        <div v-if="unbanTargetUser">
          <div class="user-info">
            <strong>目标用户：</strong>ID {{ unbanTargetUser.buyerUserId }}
            <span v-if="unbanTargetUser.userAccount || unbanTargetUser.phone || unbanTargetUser.name">
              （{{ unbanTargetUser.userAccount || unbanTargetUser.phone || unbanTargetUser.name }}）
            </span>
          </div>
          <p class="confirm-text">确定要解除该用户的禁言状态吗？</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="unbanDialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="confirmUnban">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'UserBanManage',
  data() {
    return {
      submitLoading: false,
      tableLoading: false,

      // 搜索表单数据
      searchForm: {
        keyword: '',
        state: ''
      },

      

      // 禁言对话框
      banDialogVisible: false,
      banTargetUser: null,
      banDialogForm: {
        account: '',
        durationValue: 1,
        durationUnit: 'hour',
        groupDurationValue: 1,
        groupDurationUnit: 'hour',
        reason: ''
      },
      banFormRules: {
        account: [
          { required: true, message: '请输入用户账号', trigger: 'blur' }
        ]
      },

      // 解除禁言对话框
      unbanDialogVisible: false,
      unbanTargetUser: null,

      // 用户列表相关
      userList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableKey: 0
    }
  },

  methods: {


testDialog() {
  this.banDialogVisible = true
  this.banTargetUser = { buyerUserId: 1168, name: 'MJ72469', phone: '15622728104' }
  this.banDialogForm.account = 'MJ72469'
  console.log('testDialog:', this.banDialogForm)
},

// 处理禁言点击
handleBanClick(user) {
  console.log('handleBanClick:', user)
  if (!user) {
    this.$message.error('用户信息为空')
    return
  }

  if (typeof user.buyerUserId !== 'number' || user.buyerUserId <= 0) {
    this.$message.error('用户ID无效')
    return
  }

  this.openBanDialog(user) 
},

openBanDialog(user) {
  console.log('openBanDialog:', user)
  this.banTargetUser = user
  this.banDialogForm.account = user.userAccount || user.phone || user.name || '未知用户'
  this.banDialogForm.durationValue = 1
  this.banDialogForm.durationUnit = 'hour'
  this.banDialogForm.groupDurationValue = 1
  this.banDialogForm.groupDurationUnit = 'hour'
  this.banDialogForm.reason = ''
  this.banDialogVisible = true
  console.log('弹窗已打开:', this.banDialogVisible)
},
  // 处理解除禁言点击
  handleUnbanClick(user) {
     console.log('handleUnbanClick:', user)
    if (!user || !user.buyerUserId) {
      this.$message.error('用户信息不完整，无法执行解除禁言');
      return;
    }
    this.openUnbanDialog(user);
  },


    // 计算禁言时长（转换为秒）
    calculateBanDuration(value, unit) {
      const unitMap = { minute: 60, hour: 3600, day: 86400 }
      return value * unitMap[unit]
    },

    // 获取性别文本
    getSexText(sex) {
      if (!sex) return '未设置'
      const sexMap = { '1': '男', '2': '女', '0': '未知' }
      return sexMap[sex] || sex
    },

    // 获取注册来源文本
    getTerminalText(terminal) {
      if (!terminal) return '未知'
      const terminalMap = {
        0: '未知',
        1: 'APP',
        2: '小程序',
        3: 'H5',
        4: '支付宝小程序',
        5: 'PC'
      }
      return terminalMap[terminal] || terminal
    },

    // 打开解除禁言对话框
    openUnbanDialog(user) {
     console.log('openUnbanDialog:', user)
    this.unbanTargetUser = user
    this.unbanDialogVisible = true
    this.$nextTick(() => {
    console.log('弹窗已打开:', this.unbanDialogVisible)
  })
    },

   async confirmBan() {
  if (!this.banTargetUser) return;

  this.$refs.banForm.validate(async (valid) => {
    if (!valid) return;

    this.submitLoading = true;
    try {
      const c2CDuration = this.calculateBanDuration(this.banDialogForm.durationValue, this.banDialogForm.durationUnit);
      const groupDuration = this.calculateBanDuration(this.banDialogForm.groupDurationValue, this.banDialogForm.groupDurationUnit);

      const params = {
        account: this.banTargetUser.buyerUserId.toString(),
        c2CmsgNospeakingTime: c2CDuration,
        groupmsgNospeakingTime: groupDuration
      };

      console.log('禁言请求参数:', params);

      const response = await request({
        url: '/userManage/stop/speck',
        method: 'post',
        data: params
      });

  

      if (response.data && response.code === "200" ||response.code === 200) {
        alert(response.message)
        this.banDialogVisible = false;
        this.loadUserList();
      } else {
       alert(response.message);
      }
    } catch (error) {
   console.error('操作失败:', error)
    let msg = '操作失败：网络错误'
    if (error.response && error.response.data) {
     msg = error.response.data.message || error.response.data.error || msg
    } else if (error.message) {
     msg = error.message
    }
    this.$message.error(msg)
  }finally {
      this.submitLoading = false;
    }
  });
},
// 在 confirmUnban 方法中添加更多类型检查
async confirmUnban() {
  if (!this.unbanTargetUser) return;

  this.submitLoading = true;
  try {
    const params = {
      account: this.unbanTargetUser.buyerUserId.toString(),
      c2CmsgNospeakingTime: 0,
      groupmsgNospeakingTime: 0
    };

    const response = await request({
      url: '/userManage/stop/speck',
      method: 'post',
      data: params
    });
    console.log('通过请求成功1');

    // 严格检查 response 和 response.data
    if (!response || !response.data) {
     alert('请求失败：未收到有效响应');
      return;
    }
    console.log('通过请求成功2');
    console.log(response.code);

    if (response.code === "200"||response.code === 200) {
      console.log('通过请求成功3');
      alert(response.message)
      this.unbanDialogVisible = false;
      this.loadUserList();
    } else {
      console.log('通过请求成功4');
      // 使用安全的属性访问方式
      const message = response.message 
      alert(message);
    }
    console.log('通过请求成功~');
  } catch (error) {
    console.error('操作失败:', error);
    let msg = '操作失败：网络错误';

   alert(msg);
  } finally {
    this.submitLoading = false;
  }
},

    // 查询用户列表
    async loadUserList() {
      this.tableLoading = true
      try {
        const response = await request({
          url: '/userManage/getUserList',
          method: 'get',
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            search: this.searchForm.keyword,
            state: this.searchForm.state
          }
        })

        if (response.code === "200" || response.code === 200) {
          const data = response.data
          

          let userList = []
          let total = 0

          if (data && data.list && Array.isArray(data.list)) {
            userList = data.list.filter(item => item && item.buyerUserId)
            total = data.total || 0
          } else if (data && Array.isArray(data)) {
            userList = data.filter(item => item && item.buyerUserId)
            total = userList.length
          } else {
            this.$message.error('数据格式错误')
            return
          }

          // 直接覆盖赋值：不要中途清空 this.userList / this.total
          const validatedList = userList.map(item => ({
            buyerUserId: item.buyerUserId || 0,
            name: item.name || '',
            sex: item.sex || '',
            phone: item.phone || '',
            memberLevelName: item.memberLevelName || '普通用户',
            terminal: item.terminal || 0,
            state: item.state || 0,
            ifBlack: item.ifBlack || 0,
            userAccount: item.account || '',
            ...item
          }))

          this.userList = validatedList
          this.total = total
        } else {
          this.$message.error(response.message || '加载失败')
        }
      } catch (error) {
        this.$message.error('加载用户列表失败：' + (error.message || '网络错误'))
      } finally {
        this.tableLoading = false
      }
    },

    // 处理搜索
    handleSearch() {
      this.currentPage = 1 // 重置到第一页
      this.loadUserList()
    },

    // 处理重置
    handleReset() {
      this.searchForm.keyword = ''
      this.searchForm.state = ''
      this.currentPage = 1 // 重置到第一页
      this.loadUserList()
    },

    // 分页事件处理
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1 // 重置到第一页
      this.loadUserList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadUserList()
    }
  },

  mounted() {
    console.log('=== 组件挂载 ===')
    this.loadUserList()
  }
}
</script>

<style scoped>
/* 主容器样式 */
.user-ban-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 卡片样式 */
.ban-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.ban-card .el-card__header {
  background-color: #409eff;
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 15px 20px;
}

.ban-card .el-card__header span {
  font-size: 16px;
  font-weight: 600;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 用户列表区域样式 */
.user-list-section {
  margin-top: 20px;
}

.user-list-section h3 {
  margin-bottom: 20px;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

/* 调试信息框样式 */
.debug-info {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 4px solid #409eff;
}

.debug-info p {
  margin: 5px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #606266;
}

.debug-info strong {
  color: #409eff;
  font-weight: 600;
}

/* 表格样式 */
.el-table {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #e4e7ed;
}

.el-table td {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.el-table .el-table__row:hover {
  background-color: #f5f7fa;
}

/* 表格加载状态样式 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
}

.el-loading-spinner .el-loading-text {
  color: #409eff;
  font-size: 14px;
  margin-top: 10px;
}

/* 空数据状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 6px;
  margin: 20px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.empty-state .el-empty__description {
  color: #909399;
  font-size: 14px;
  margin: 20px 0;
}

.empty-state .el-button {
  border-radius: 4px;
  padding: 10px 20px;
}

/* 操作按钮样式 */
.operation-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.operation-buttons .el-button {
  margin: 0;
  border-radius: 4px;
  font-weight: 500;
}

.operation-buttons .el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.operation-buttons .el-button--warning {
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.operation-buttons .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 状态标签样式 */
.el-tag {
  border-radius: 4px;
  font-weight: 500;
  padding: 4px 8px;
}

.el-tag--success {
  background-color: #f0f9ff;
  border-color: #67c23a;
  color: #67c23a;
}

.el-tag--danger {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

.el-tag--info {
  background-color: #f4f4f5;
  border-color: #909399;
  color: #909399;
}

/* 分页组件样式 */
.pagination-wrapper {
  text-align: center;
  margin-top: 20px;
  padding: 20px 0;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.el-pagination .el-pagination__total {
  margin-right: 15px;
  color: #606266;
}

.el-pagination .el-pagination__sizes {
  margin-right: 15px;
}

.pagination-wrapper .el-pager li {
  border-radius: 4px;
  margin: 0 2px;
  transition: all 0.3s ease;
}

.pagination-wrapper .el-pager li.active {
  background-color: #409eff !important;
  color: white !important;
  font-weight: 600;
  transform: scale(1.05);
}

.el-pagination .el-pager li.active {
  background-color: #409eff;
  color: white;
}

/* 对话框样式 */
.ban-dialog .el-dialog__header,
.unban-dialog .el-dialog__header {
  background-color: #409eff;
  color: white;
  border-radius: 8px 8px 0 0;
}

.ban-dialog .el-dialog__title,
.unban-dialog .el-dialog__title {
  color: white;
  font-weight: 600;
}

.ban-dialog .el-dialog__body,
.unban-dialog .el-dialog__body {
  padding: 20px;
}

.user-info {
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 4px solid #409eff;
  color: #606266;
  line-height: 1.6;
}

.confirm-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* 表单样式 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 600;
  color: #303133;
}

.el-input,
.el-select,
.el-input-number {
  border-radius: 4px;
}

.el-input:focus,
.el-select:focus,
.el-input-number:focus {
  border-color: #409eff;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  text-align: right;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
  border-radius: 4px;
  font-weight: 500;
  padding: 10px 20px;
}

.dialog-footer .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .user-ban-container {
    padding: 15px;
  }
  
  .el-table th,
  .el-table td {
    padding: 8px 4px;
    font-size: 13px;
  }
  
  .operation-buttons .el-button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .user-ban-container {
    padding: 10px;
  }
  
  .ban-card .el-card__header {
    padding: 12px 15px;
  }
  
  .user-list-section h3 {
    font-size: 16px;
  }
  
  .debug-info {
    padding: 12px;
    font-size: 12px;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-dialog {
    width: 90% !important;
    margin: 5vh auto;
  }
  
  .operation-buttons {
    flex-direction: column;
    gap: 5px;
  }
  
  .operation-buttons .el-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .user-ban-container {
    padding: 5px;
  }
  
  .ban-card {
    margin-bottom: 10px;
  }
  
  .user-list-section {
    margin-top: 10px;
  }
  
  .debug-info {
    padding: 10px;
    margin-bottom: 15px;
  }
  
  .pagination-wrapper {
    padding: 15px 0;
  }
}

/* 自定义表格样式 */
.user-table-container {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 2px solid #e4e7ed;
}

.header-cell {
  padding: 12px 8px;
  font-weight: 600;
  color: #606266;
  text-align: center;
  border-right: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-cell:last-child {
  border-right: none;
}

.table-body {
  max-height: 600px;
  overflow-y: auto;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s ease;
}

.table-row:hover {
  background-color: #f5f7fa;
}

.row-even {
  background-color: #fafafa;
}

.row-odd {
  background-color: white;
}

.table-cell {
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
}

.table-cell:last-child {
  border-right: none;
}

/* 操作按钮在单元格中的样式 */
.table-cell .operation-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.table-cell .operation-buttons .el-button {
  margin: 0;
  border-radius: 4px;
  font-weight: 500;
}

/* 状态标签在单元格中的样式 */
.table-cell .el-tag {
  border-radius: 4px;
  font-weight: 500;
  padding: 4px 8px;
}
</style>